<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>门店查询</title>

<link href="../statics/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
	body{
	width: 100%;
	padding: 0rem;
	}
	.container{
		margin: 0rem;
		padding: 0rem;
	}
	.searchbox{
	    background: linear-gradient(to right, #5fd6fc, #5ef0c0);
		padding: 1rem 0rem 2rem 0rem;
		margin-right: 0rem;
		line-height: 3rem;
	}
}
</style>
<script type="text/javascript" src="../statics/js/jquery-1.12.4.js" ></script>
<script type="text/javascript" src="../statics/js/wg/bootstrap.min.js"></script>
<script type="text/javascript">
	//进入页面时   加载 省份列表  
	$(function(){
		bind_pro();
		company();
		//给省份  列表 添加  点击事件
		$("#province").change(function(){
			$("#county").children().remove();
			//得到 我们选中的 元素的值
			var id =$("#province option:selected").val();
			//根据 省份的 ID 去 获得 市 
			bind_city(id);
			
		});
		
		//给城市  列表 添加  点击事件
		$("#city").change(function(){
			//得到 我们选中的 元素的值
			var id =$("#city option:selected").val();
			//根据 城市的 ID 去 获得 区县 
			bind_county(id);
		});
		
	});
	
	//开始进行展示的界面
	function company(){
		$.getJSON(
				//1 访问路径
				"company",
				null,
				//回调函数
				function(data){
					//遍历取得的所有省份LIST  集合 并且赋值
					$(data).each(function(index,ob){
						var adress = ob.adress;	
						var phone =ob.phone;
						
						var option ="<tr><td>公司地址:"+adress+"<br/>联系电话:"+phone+"</td></tr>";
						$("#company").append(option);
						
					});
								
				});
		
	}
	
	function bind_pro(){
		$.getJSON(
			//1 访问路径
			"ProvinceServlet",
			null,
			//回调函数
			function(data){
				//遍历取得的所有省份LIST  集合 并且赋值
				$(data).each(function(index,ob){
					var id = ob.adressid;
					var name =ob.province;
					
					var option ="<option value ='"+id+"'>"+name+"</option>"
					$("#province").append(option);
					
				});
				$("#province option:first").before(
					"<option value ='-1' selected='selected'>--选择省份--</option>"
				);			
			});
	}

	function bind_city(proId){
	$.getJSON(
		//1 访问路径
		"CityServlet",
		{"proId":proId},
		//回调函数
		function(data){
			//对之前 过时的数据 进行移除
			$("#city").children().remove();
			//遍历取得的所有城市LIST  集合 并且赋值
			$(data).each(function(index,ob){
				var id = ob.id;
				var name =ob.city;
				
				var option ="<option value ='"+id+"'>"+name+"</option>"
				$("#city").append(option);
				
			});
			$("#city option:first").before(
				"<option value ='-1' selected='selected'>--选择城市--</option>"
			);			
		});
}			

		function bind_county(cityId){
			$("#company").children().remove();
			$.getJSON(
		//1 访问路径
		"CountyServlet",
		{"cityId":cityId},
		//回调函数
		function(data){
			$("#company").children().remove();
			//遍历取得的所有省份LIST  集合 并且赋值
			$(data).each(function(index,ob){
				var adress = ob.adress;	
				var phone =ob.phone;
				
				var option ="<tr><td>公司地址: "+adress+"<br/>联系电话:"+phone+"</td></tr>";
				$("#company").append(option);
				
			});	
			
		});	
}
	function soso(){
		var adress = $("#adress").val();
		var city = $("#city").val();
		if(adress==null || adress ==""){
			alert("请输入搜索的城市");
		}else{
			$("#company").children().remove();
			$.getJSON(
		//1 访问路径
		"soso",
		{"city":city,
		"adress":adress},
		//回调函数
		function(data){
			$("#company").children().remove();
			//遍历取得的所有省份LIST  集合 并且赋值
			$(data).each(function(index,ob){
				var adress = ob.adress;	
				var phone =ob.phone;
				
				var option ="<tr><td>公司地址: "+adress+"<br/>联系电话:"+phone+"</td></tr>";
				$("#company").append(option);
				
			});	
			
		});	
		}
	}
</script>
</head>
<body>
	<div class="container">
	
	
		<div class="col-xs-12 searchbox">
			<img src="../statics/img/ccx_img/search.png" class="img-responsive" onclick="soso()"  style="position: relative;left: 9rem;
			top: 3.4rem; width: 3rem;"/>
			<input type="text" id="adress" placeholder="请输入要搜索的城市" 
			style="border-radius: 1.5rem;text-align: center;width: 23rem;height: 4rem;margin-left: 20%;"/>
			
		</div>
	
		
		
		<div class="col-xs-12  h6" style="padding: 0rem;margin: 2rem 0rem;">
			<!--选择省份-->
			<span class="col-xs-2" style="padding: 0.26rem 0rem;text-align: center;">省份:</span>
			<select name="province" id="province" class="col-xs-3" style="padding: 0rem;">	
			</select>
			<!--用来空格-->
			<div class="col-xs-1" style="padding: 0rem;"></div>
			<!--选择城市-->
			<span class="col-xs-2" style="padding: 0.26rem 0rem;text-align: center;">城市:</span>
			<select name="city" id="city" class="col-xs-3" style="padding: 0rem;">				
			</select>	
		</div>
		
		
		
		<table id="company" class="table col-xs-12">
		</table>
		
	</div>


</body>
</html>